<!-- 讲师管理 -->
<template>
    <div class="app-container">
        <!--***************************检索条件*******************************-->
        <!--
            name,carrer,level,beginTime,endTime,priority
        -->
        <el-form :inline="true" :model="pageTeacher" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="pageTeacher.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="资历">
                <el-input v-model="pageTeacher.career" placeholder="资历"></el-input>
            </el-form-item>
            <el-form-item label="头衔">
                <el-select v-model="pageTeacher.level" placeholder="头衔" clearable>
                    <el-option label="高级讲师" value="1"></el-option>
                    <el-option label="首席讲师" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="入驻时间">
                <el-date-picker
                    v-model="beginEndTime"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="优先级">
                <el-select v-model="pageTeacher.priority" placeholder="等级" clearable>
                    <el-option label="升序" :value="true"></el-option>
                    <el-option label="降序" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getTeachers">查询</el-button>
            </el-form-item>
            <el-button
                type="success"
                @click="$router.push({
                        name: 'teacherInfo',
                    })"
            >添加</el-button>
            <el-button
                type="danger"
                :disabled="deleteBatchButton"
                @click="deleteTeacherByIds(multipleSelection)"
            >批量删除</el-button>
        </el-form>
        <!--******************************数据*******************************-->
        <el-table
            :data="teachers"
            style="width: 100%"
            v-loading="loading"
            stripe
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="姓名" width="100">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.name }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="头像" width="100">
                <template slot-scope="scope">
                    <el-tooltip placement="top">
                        <div slot="content">
                            <el-image
                                style="width: 150px; height: 150px"
                                :src="scope.row.avatar"
                                fit="contain"
                            ></el-image>
                        </div>
                        <el-avatar :size="45" fit="contain" :src="scope.row.avatar"></el-avatar>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column label="头衔" width="180">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level===1" type="warning" effect="dark">高级讲师</el-tag>
                    <el-tag v-else type="danger" effect="dark">首席讲师</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="资历" prop="career" width="100"></el-table-column>
            <el-table-column label="简历" width="200">
                <template slot-scope="scope">
                    <el-tooltip placement="left" effect="light">
                        <div slot="content">
                            <el-card class="box-card">
                                <div v-html="scope.row.intro"></div>
                            </el-card>
                        </div>
                        <el-card class="box-card">{{getText(scope.row.intro)}}</el-card>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="入驻时间" prop="gmtCreate"></el-table-column>
            <el-table-column label="检索优先级">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="数字越小优先级越高" placement="bottom">
                        <el-slider
                            v-model="scope.row.sort"
                            :step="1"
                            :min="1"
                            :max="10"
                            show-stops
                            @change="updateTeacherSort(scope.row)"
                        ></el-slider>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="$router.push({
                        name: 'teacherInfo',
                        params: { 'id': scope.row.id }
                    })"
                    >修改</el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="deleteTeacherById(scope.row.id)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--******************************分页*******************************-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="current"
            :page-sizes="[6, 15, 20, 30, 40, 50]"
            :page-size="limit"
            :hide-on-single-page="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>

        <el-backtop :visibility-height="100"></el-backtop>
    </div>
</template>



<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { pageTeacher, updateTeacher, removeByIds } from "@/api/ucenter/teacher";
import { getHtmlPlainText } from "@/utils/extractHTML";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            //检索条件
            pageTeacher: {
                name: "",
                career: "",
                level: "",
                beginTime: "",
                endTime: "",
                priority: "",
            },
            beginEndTime: "",

            //分液器
            current: 1,
            limit: 6,
            total: 0,

            //表格数据
            teachers: [],
            multipleSelection: [],
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
            ],
            loading: true,
        };
    },
    //监听属性 类似于data概念
    computed: {
        deleteBatchButton() {
            return this.multipleSelection.length === 0;
        },
    },
    //监控data中的数据变化
    watch: {
        beginEndTime(newValue, oldValue) {
            if (newValue) {
                this.pageTeacher.beginTime = newValue[0];
                this.pageTeacher.endTime = newValue[1];
            } else {
                this.pageTeacher.beginTime = "";
                this.pageTeacher.endTime = "";
            }
        },
    },
    //方法集合
    methods: {
        handleSizeChange(val) {
            this.current = parseInt((this.current * this.limit) / val);
            this.limit = val;
            this.getTeachers(this.current);
        },
        handleCurrentChange(val) {
            this.getTeachers(val);
        },
        getTeachers(page = 1) {
            this.current = page;
            this.loading = true;
            pageTeacher(this.pageTeacher, this.current, this.limit).then(
                (response) => {
                    this.teachers = response.data.teachers;
                    this.total = response.data.rows;
                    this.loading = false;
                }
            );
        },
        handleSelectionChange(val) {
            this.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.multipleSelection.push(val[i].id);
            }
        },
        deleteTeacherById(id) {
            var ids = [];
            ids.push(id);
            this.deleteTeacherByIds(ids);
        },
        deleteTeacherByIds(ids) {
            this.$confirm("确定要删除吗？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                removeByIds(ids)
                    .then((response) => {
                        this.getTeachers();
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                    })
                    .catch(() => {});
            });
        },
        updateTeacherSort(val) {
            updateTeacher(val).then((response) => {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
            });
        },
        getText(str) {
            str = getHtmlPlainText(str);
            return str;
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getTeachers();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
.item {
    margin: 4px;
}
</style>